<template>
  <div>
    <div style="margin:30px">封装的树形结构</div>
    <div class="about">
      <Tree :isSelect="isSelect" :data="treeData" @node-click="handle" @change="loadData" />
    </div>
  </div>
</template>

<script>
import Tree from '@/components/my-tree/Tree.vue';
import json from './mock/Mock';

export default {
  components: {
    Tree
  },
  name: "treeDemo",
  data() {
    return {
      treeData: [],
      isSelect: false,
      defaultProps: {
        children: 'children',
        label: 'title',
        key: 'id',
      },
    };
  },
  created() {
    this.treeData = json.data.list
  },
  methods: {
    onEdit(row) {
      console.log(row);
    },
    handle(node) {
      console.log('点击节点 Data : ', node)
    },
    loadData(treeNode) {
      console.log(treeNode)
      // eg: 动态更新子节点
      // treeNode.children = JSON.parse(JSON.stringify(json.data.list))
      // this.treeData = [...this.treeData]
    },
  },
}
</script>

<style scoped>

</style>